@import "@/var.scss";

.jiandaoyun {
  > .banner {
    padding-top: 60px;
    background: linear-gradient(
      to right,
      rgba(244, 246, 249, 1) 0,
      rgba(244, 246, 249, 0.64) 100%
    );
    .advertise-banner {
      cursor: pointer;
      font-size: 24px;
      line-height: 60px;
      height: 60px;
      background: url(https://blog-assets.jiandaoyun.com/index/outsourcing/publicity_max_pc.png)
        center center no-repeat;
      background-size: cover;
    }
    .row {
      width: 1280px;
      padding: 40px 60px 95px 60px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .txt {
      width: 530px;
      h2 {
        font-size: 44px;
        font-weight: 500;
        color: #1f2d3d;
        line-height: 62px;
        margin-bottom: 8px;
      }
      h3 {
        font-size: 30px;
        font-weight: 400;
        color: #283a4c;
        line-height: 42px;
        margin-bottom: 40px;
      }
      #typed {
        color: $green;
        font-weight: 600;
      }
      .typed-cursor {
        font-weight: 600;
        color: $green;
        opacity: 1;
        animation: blink 0.7s infinite;

        @keyframes blink {
          0% {
            opacity: 0;
          }
          100% {
          }
        }
      }
      .form {
        width: 400px;
        height: 48px;
        background: #fff;
        box-shadow: 0 1px 8px 0 rgba(123, 123, 123, 0.09);
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        margin-bottom: 20px;
        input[type="text"] {
          width: 260px;
          font-size: 14px;
          padding-left: 45px;
          height: 48px;
          font-weight: 400;
          color: #1f2d3d;
          background-image: url(https://blog-assets.jiandaoyun.com/index/outsourcing/2020jdy-iphone.png);
          background-size: 17px;
          background-repeat: no-repeat;
          background-position: 15px center;
        }
        input[type="button"] {
          width: 140px;
          height: 48px;
          font-size: 20px;
          background: #0db3a6;
          color: #fff;
          cursor: pointer;
        }
      }
    }
    .video-block {
      position: relative;
      flex: auto;
      .img {
        width: 630px;
      }
      .video-btn {
        cursor: pointer;
        width: 206px;
        height: 206px;
        background: url(https://blog-assets.jiandaoyun.com/index/outsourcing/video_btn.png);
        background-size: cover;
        position: absolute;
        top: 57%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
